<template>
  <v-snackbar
    v-model="snackbar"
    multi-line
    :style="{ bottom: `90%` }"
    timeout="1000"
    @click="snackbar = false"
    :color="color"
  >
    <v-icon left>{{ text_ico }}</v-icon> {{ text }}
  </v-snackbar>
  <v-card-actions>
    <v-col cols="1">
      <v-btn color="orange" @click="goBack">
        <v-icon start icon="mdi-arrow-left"></v-icon>
        Back
      </v-btn>
    </v-col>
    <v-col cols="1">
      <v-btn class="centered-btn" @click="openModal">Curl</v-btn>
    </v-col>
    <v-col cols="1">
      <v-btn class="centered-btn" @click="copytext">复制Request</v-btn>
    </v-col>
    <v-col cols="1">
      <v-btn class="centered-btn" @click="clear">清空表单</v-btn>
    </v-col>
    <v-col cols="1">
      <v-btn class="centered-btn" @click="clear">请求记录</v-btn>
    </v-col>
  </v-card-actions>
  <div class="container">
    <div
      class="left-container"
      v-show="showLeftContainer"
      :style="{ width: leftContainerWidth }"
    >
      <!-- 左侧表单 -->
      <form @submit.prevent="submit">
        <v-text-field
          label="请求网站"
          required
          v-model="formData.url"
          :rules="urlRules"
        ></v-text-field>
        <v-textarea label="请求参数" v-model="formData.data"></v-textarea>
        <v-textarea label="请求头" v-model="formData.header" rows="10">
        </v-textarea>
        <v-row>
          <v-col cols="2">
            <v-btn size="x-small" @click="handleClick">格式化请求头</v-btn>
          </v-col>
          <v-col cols="2">
            <v-btn size="x-small" @click="openhModal">编辑请求头</v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="3">
            <v-select
              label="请求方式"
              v-model="formData.method"
              :items="options"
            ></v-select>
          </v-col>
          <v-col cols="3">
            <v-select
              label="编码"
              v-model="formData.encode"
              :items="encode"
            ></v-select>
          </v-col>
          <v-col cols="3">
            <v-switch label="Verify" v-model="formData.verify"></v-switch>
          </v-col>
        </v-row>
      </form>
      <v-row justify="center">
        <v-col cols="auto">
          <v-btn @click="sendFormData"> 运行 </v-btn>
        </v-col>
      </v-row>
    </div>
    <div
      class="right-container"
      v-show="showRightContainer"
      :style="{ width: RightContainerWidth }"
    >
      <!-- 右侧自定义内容 -->
      <!-- <v-card> -->
      <!-- <v-list class="headline bg-grey">
          <v-list-item>
            <v-row>
              <v-col>
                <v-list-item-title>任务列表</v-list-item-title>
              </v-col>

              <v-spacer></v-spacer>

              <v-col>
                <v-list-item-title @click="taskdel('all')">
                  删除全部
                </v-list-item-title>
              </v-col>
            </v-row>
          </v-list-item>
        </v-list> -->

      <!-- <v-virtual-scroll :items="items" height="200px">
          <template v-slot:default="{ item, index }">
            <div :class="[
              index % 2 === 0 ? 'py-2' : index % 5 == 0 ? 'py-8' : 'py-4',
              index % 2 === 0
                ? 'bg-grey-lighten-2'
                : index % 5 === 0
                  ? 'bg-grey-darken-2'
                  : '',
              'px-2',
            ]" style="display: flex; gap: 8px">
              <v-btn size="x-small" color="success" @click="showAlert(item)">
                host:{{ item.host }}
              </v-btn>
              <v-btn size="x-small" color="success" @click="showAlert(item)">
                {{ item.time }}
              </v-btn>
              <v-btn size="x-small" color="success" @click="showAlert(item)">{{ item.code }}
              </v-btn>
              <v-btn size="x-small" color="warning" @click="taskdel(item._id)">删除
              </v-btn>
            </div>
          </template>
        </v-virtual-scroll>
      </v-card> -->

      <v-card>
        <v-tabs v-model="tab" bg-color="blue">
          <v-tab v-for="item in tabs" :key="item.value" :value="item.value">
            {{ item.label }}
          </v-tab>
        </v-tabs>
        <v-card-text>
          <div
            style="
              height: 100%;
              width: 100%;
              overflow-x: auto;
              font-size: small;
            "
          >
            <v-window v-model="tab" style="height: 100%">
              <v-window-item
                v-for="item in tabs"
                :key="item.value"
                :value="item.value"
              >
                <v-container>
                  <div
                    style="width: 100%; overflow-x: auto"
                    v-show="shouldDisplayContent(item.value)"
                    v-html="item.content"
                  ></div>
                </v-container>
                <div v-show="shouldContent(item.value)">
                  <v-row align="center">
                    <v-col cols="3">
                      <v-chip
                        class="ma-2"
                        color="primary"
                        label
                        @click="datasource"
                      >
                        <v-icon
                          start
                          icon="mdi-account-circle-outline"
                        ></v-icon>
                        关闭html校验
                      </v-chip>
                    </v-col>
                  </v-row>
                  <v-container>
                    <template v-if="item.isJson">
                      <json-viewer :value="jd" copyable boxed></json-viewer>
                    </template>
                    <template v-else>
                      <v-text class="text--primary">{{ item.content }}</v-text>
                    </template>
                  </v-container>
                </div>

                <div v-if="item.content.a">
                  <div
                    v-show="tableContent(item.value)"
                    style="width: 100%; overflow-x: auto"
                  >
                    <table style="width: 100%">
                      <!-- 表头 -->
                      <thead>
                        <!-- 点击th时切换isCollapsed状态 -->
                        <tr>
                          <th
                            colspan="3"
                            style="
                              background-color: rgb(241, 243, 244);
                              text-align: left;
                            "
                          >
                            <v-icon
                              @click="item.aisCollapsed = !item.aisCollapsed"
                              >{{
                                item.aisCollapsed
                                  ? "mdi-menu-down"
                                  : "mdi-menu-up"
                              }}</v-icon
                            >
                            {{ item.content.a.name }}
                            <v-icon
                              class="copy-icon"
                              @click="copyItem(item.content.a.rows)"
                              >mdi-content-copy</v-icon
                            >
                          </th>
                        </tr>
                      </thead>
                      <tbody v-show="!item.aisCollapsed">
                        <!-- 表格数据 -->
                        <tr
                          v-for="(row, index) in item.content.a.rows"
                          :key="index"
                        >
                          <td style="width: 30%; white-space: nowrap">
                            {{ row[0] }}
                          </td>
                          <td style="width: 70%; word-wrap: break-word">
                            {{ row[1] }}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table style="width: 100%">
                      <!-- 表头 -->
                      <thead>
                        <!-- 点击th时切换isCollapsed状态 -->
                        <tr>
                          <th
                            colspan="3"
                            style="
                              background-color: rgb(241, 243, 244);
                              text-align: left;
                            "
                          >
                            <v-icon
                              @click="item.bisCollapsed = !item.bisCollapsed"
                              >{{
                                item.bisCollapsed
                                  ? "mdi-menu-down"
                                  : "mdi-menu-up"
                              }}</v-icon
                            >
                            {{ item.content.b.name }}
                            <v-icon
                              class="copy-icon"
                              @click="copyItem(item.content.b.rows)"
                              >mdi-content-copy</v-icon
                            >
                          </th>
                        </tr>
                      </thead>
                      <tbody v-show="!item.bisCollapsed">
                        <!-- 表格数据 -->
                        <tr
                          v-for="(row, index) in item.content.b.rows"
                          :key="index"
                        >
                          <td style="width: 30%; white-space: nowrap">
                            {{ row[0] }}
                          </td>
                          <td style="width: 70%; word-wrap: break-word">
                            {{ row[1] }}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <table style="width: 100%">
                      <!-- 表头 -->
                      <thead>
                        <!-- 点击th时切换isCollapsed状态 -->
                        <tr>
                          <th
                            colspan="3"
                            style="
                              background-color: rgb(241, 243, 244);
                              text-align: left;
                            "
                          >
                            <v-icon
                              @click="item.cisCollapsed = !item.cisCollapsed"
                              >{{
                                item.cisCollapsed
                                  ? "mdi-menu-down"
                                  : "mdi-menu-up"
                              }}</v-icon
                            >
                            {{ item.content.c.name }}
                            <v-icon
                              class="copy-icon"
                              @click="copyItem(item.content.c.rows)"
                              >mdi-content-copy</v-icon
                            >
                          </th>
                        </tr>
                      </thead>
                      <tbody v-show="!item.cisCollapsed">
                        <!-- 表格数据 -->
                        <tr
                          v-for="(row, index) in item.content.c.rows"
                          :key="index"
                        >
                          <td style="width: 30%; white-space: nowrap">
                            {{ row[0] }}
                          </td>
                          <td style="width: 70%; word-wrap: break-word">
                            {{ row[1] }}
                          </td>
                        </tr>
                      </tbody>
                    </table>

                    <table style="width: 100%; padding-bottom: 20%">
                      <!-- 表头 -->
                      <thead>
                        <!-- 点击th时切换isCollapsed状态 -->
                        <tr>
                          <th
                            colspan="3"
                            style="
                              background-color: rgb(241, 243, 244);
                              text-align: left;
                            "
                          >
                            <v-icon
                              @click="item.disCollapsed = !item.disCollapsed"
                              >{{
                                item.disCollapsed
                                  ? "mdi-menu-down"
                                  : "mdi-menu-up"
                              }}</v-icon
                            >
                            {{ item.content.d.name }}
                            <v-icon
                              class="copy-icon"
                              @click="copyItem2(item.content.d.rows)"
                              >mdi-content-copy</v-icon
                            >
                          </th>
                        </tr>
                      </thead>
                      <tbody v-show="!item.disCollapsed">
                        <!-- 表格数据 -->
                        <tr
                          v-for="(row, index) in item.content.d.rows"
                          :key="index"
                        >
                          <td style="width: 30%; white-space: nowrap">
                            {{ row[0] }}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </v-window-item>
            </v-window>

            <v-window v-model="tab" style="height: 100%">
              <v-window-item
                v-for="item in tabs"
                :key="item.value"
                :value="item.value"
              >
                <div v-if="item.content.e">
                  <div
                    v-show="tableContent(item.value)"
                    style="width: 100%; overflow-x: auto"
                  >
                    <table style="width: 100%">
                      <!-- 表头 -->
                      <thead>
                        <!-- 点击th时切换isCollapsed状态 -->
                        <tr>
                          <th
                            colspan="3"
                            style="
                              background-color: rgb(241, 243, 244);
                              text-align: left;
                            "
                          >
                            <v-icon
                              @click="item.eisCollapsed = !item.eisCollapsed"
                              >{{
                                item.eisCollapsed
                                  ? "mdi-menu-down"
                                  : "mdi-menu-up"
                              }}</v-icon
                            >
                            {{ item.content.e.name }}
                            <v-icon
                              class="copy-icon"
                              @click="copyItem(item.content.e.rows)"
                              >mdi-content-copy</v-icon
                            >
                          </th>
                        </tr>
                      </thead>
                      <tbody v-show="!item.eisCollapsed">
                        <!-- 表格数据 -->
                        <tr
                          v-for="(row, index) in item.content.e.rows"
                          :key="index"
                        >
                          <td style="width: 30%; white-space: nowrap">
                            {{ row[0] }}
                          </td>
                          <td style="width: 70%; word-wrap: break-word">
                            {{ row[1] }}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </v-window-item>
            </v-window>
          </div>
        </v-card-text>
      </v-card>
    </div>
  </div>
  <v-dialog v-model="modalOpen" persistent max-width="50%">
    <v-card>
      <v-card-text>
        <v-textarea
          label="请输入curl"
          class="full-height"
          rows="10"
          v-model="inputValue"
        ></v-textarea>
      </v-card-text>
      <v-card-actions>
        <v-col cols="8">
          <v-btn @click="closeModal">关闭模态框</v-btn>
          <v-btn color="warning" @click="clearForm">清空表单</v-btn>
        </v-col>

        <v-col cols="4" style="text-align: right">
          <v-btn color="success" @click="submitForm">提交</v-btn>
        </v-col>

        <!-- 添加的清空按钮 -->
      </v-card-actions>
    </v-card>
  </v-dialog>
  <v-dialog v-model="edithmOpen" persistent max-width="50%">
    <v-card>
      <v-row no-gutters v-for="(item, key) in initData" :key="key">
        <v-col cols="4">
          <v-sheet class="pa-2 ma-2">
            <v-text-field label="键" v-model="item.key"></v-text-field>
          </v-sheet>
        </v-col>
        <v-col cols="6">
          <v-sheet class="pa-2 ma-2">
            <v-text-field label="值" v-model="item.value"></v-text-field>
          </v-sheet>
        </v-col>
        <v-col cols="1">
          <v-sheet class="pa-2 ma-2">
            <v-btn icon @click="deleteRow(key)">
              <v-icon>mdi-delete</v-icon>
            </v-btn>
          </v-sheet>
        </v-col>
        <v-col cols="1">
          <v-sheet class="pa-2 ma-2">
            <v-btn icon @click="addRow(key)">
              <v-icon>mdi-plus</v-icon>
            </v-btn>
          </v-sheet>
        </v-col>
      </v-row>
      <v-card-actions>
        <v-col cols="8">
          <v-btn @click="closehModal">关闭模态框</v-btn>
        </v-col>

        <v-col cols="4" style="text-align: right">
          <v-btn color="success" @click="saveheader">保存</v-btn>
        </v-col>

        <!-- 添加的清空按钮 -->
      </v-card-actions>
    </v-card>
  </v-dialog>

  <v-dialog v-model="jsonOpen" persistent max-width="80%">
    <v-card>
      <v-row>
        <v-col md="4">
          <v-sheet class="pa-2 ma-2">
            <v-chip
              class="ma-2"
              color="green"
              text-color="white"
              @click="copyJsonItem"
            >
              复制 JSON
            </v-chip>
          </v-sheet>
        </v-col>
        <v-col md="4" class="ms-auto text-right">
          <v-sheet class="pa-2 ma-2">
            <v-chip
              class="ma-2"
              color="red"
              text-color="white"
              @click="closejsonModal"
            >
              关闭模态框
            </v-chip>
          </v-sheet>
        </v-col>
      </v-row>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";
import { trimStart } from "lodash";
import DOMPurify from "dompurify";

export default {
  data() {
    return {
      jd: {
        test: "Holle World!",
      },
      sourcetext: null,
      jsonData: { name: "John", age: 30 }, // 初始 JSON 数据
      snackbar: false,
      text: ``,
      color: "success",
      text_ico: "mdi-check-circle",
      tab: "header",
      tabs: [
        {
          value: "header",
          label: "标头",
          content: {
            aisCollapsed: false,
            bisCollapsed: false,
            cisCollapsed: false,
            a: { name: "常规", rows: [] },
            b: { name: "响应标头", rows: [] },
            c: { name: "请求标头", rows: [] },
            d: { name: "请求参数", rows: [] },
          },
        },
        {
          value: "request",
          label: "预览",
          content: "",
        },
        { value: "response", label: "响应", content: "", isJson: false },
        {
          value: "cookie",
          label: "cookie",
          content: {
            eisCollapsed: false,
            e: { name: "响应cookie", rows: [] },
          },
        },
      ],
      url: "",
      urlRules: [
        (value) => !!value || "URL不能为空",
        (value) => /^https?:\/\//.test(value) || "URL格式不正确",
      ],
      options: ["GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS", "PATCH"],
      encode: ["utf-8", "gbk"],
      formData: {
        url: "",
        data: "",
        header: "",
        method: "GET",
        encode: "utf-8",
        verify: false,
      },
      showRightContainer: true, // 控制右侧div的显示/隐藏
      showLeftContainer: true, // 控制右侧div的显示/隐藏
      items: [], // 存储获取的数据
      modalOpen: false,
      edithmOpen: false,
      jsonOpen: false,
      inputValue: "",
      textValue: "",
      initData: [],
      itemName: this.$route.params.itemName,
    };
  },
  methods: {
    isJSONObject(obj) {
      try {
        JSON.parse(JSON.stringify(obj));
        return true;
      } catch (e) {
        return false;
      }
    },
    sanitizeHTML(content) {
      const sanitizedContent = DOMPurify.sanitize(content, {
        FORBID_TAGS: ["script"],
        FORBID_ATTR: ["onload", "onerror"],
      });

      return sanitizedContent;
    },
    deleteRow(key) {
      this.initData.splice(key, 1);
    },
    addRow(key) {
      const newRow = { key: "", value: "" };
      this.initData.splice(key + 1, 0, newRow);
    },
    showAlert(item) {
      axios
        .post("/api/spider/data/get", { id: item._id })
        .then((response) => {
          this.tabsfunc(response);
          this.alertmsg("成功");
        })
        .catch((error) => {
          this.alertmsg("失败");

          console.error(error);
        });
    },
    copyItem(e) {
      console.log(e);
      var dictData = {};
      var res = "";
      try {
        for (let i = 0; i < e.length; i++) {
          var key = e[i][0].replace(/:/g, ""); // 去除冒号
          var value = e[i][1];
          dictData[key] = value;
          res = JSON.stringify(dictData);
          console.log(dictData);
        }
      } catch {
        res = "";
      }
      this.$copyText(res)
        .then(() => {
          this.alertmsg("复制成功");
        })
        .catch(() => {
          this.alertmsg("复制失败", "mdi-cancel", "error");
        });
    },
    copyItem2(e) {
      console.log(e);
      var res;
      try {
        res = e[0][0];
      } catch {
        res = "";
      }
      this.$copyText(res)
        .then(() => {
          this.alertmsg("复制成功");
        })
        .catch(() => {
          this.alertmsg("复制失败", "mdi-cancel", "error");
        });
    },
    copyJsonItem() {
      var res = "";
      try {
        res = this.tabs[2].content;
      } catch {
        res = "";
      }
      this.$copyText(res)
        .then(() => {
          this.alertmsg("复制成功");
        })
        .catch(() => {
          this.alertmsg("复制失败", "mdi-cancel", "error");
        });
    },
    handleClick() {
      let input = this.formData.header;
      try {
        JSON.parse(input);
        return;
        // 如果能成功解析为 JSON 对象，则说明输入值已经是合法的 JSON 字符串，无需进行进一步操作
      } catch (error) {
        console.error("输入不是有效的 JSON 字符串");
      }
      const inputdata = input.replaceAll(":\n", ":").replaceAll("：\n", ":");
      // 创建对象存储键值对
      const result = {};
      inputdata.split("\n").forEach((item) => {
        const [key, value] = item.replace(":", "&&&").split("&&&");
        result[key] = trimStart(value);
      });

      const jsonString = JSON.stringify(result);
      this.formData.header = jsonString;
    },
    toggleRightContainer() {
      this.showRightContainer = !this.showRightContainer;
      this.leftContainerWidth = this.showRightContainer ? "48%" : "100%"; // 切换左侧div的宽度
    },
    toggleRightContainer2() {
      this.showLeftContainer = !this.showLeftContainer;
      this.RightContainerWidth = this.showLeftContainer ? "52%" : "100%"; // 切换左侧div的宽度
    },
    goBack() {
      this.$router.go(-1); // 返回到上一次页面
    },
    shouldDisplayContent(value) {
      return value === "request";
    },
    shouldContent(value) {
      return value === "response";
    },
    tableContent(value) {
      return value === "header" || value === "cookie";
    },
    sendFormData() {
      // 将表单数据作为参数传递给发送接口的方法
      this.sendRequest(this.formData);
    },
    sendRequest(formData) {
      formData["task"] = this.itemName;
      var datas = formData.data;
      console.log(datas);
      if (
        datas === undefined ||
        JSON.stringify(datas) === "[[null]]" ||
        JSON.stringify(datas) === '[""]' ||
        JSON.stringify(datas) === '[[""]]' ||
        JSON.stringify(datas) === "None"
      ) {
        this.formData.data = "";
      }
      axios
        .post("/api/spider/test", formData) // 发送GET请求到后端API
        .then((response) => {
          this.tabsfunc(response);
          this.fetchData();
          this.alertmsg("请求成功");
        })
        .catch((error) => {
          // 处理请求错误
          this.alertmsg("请求失败", "mdi-cancel", "error");
          console.error(error);
        });
    },
    alertmsg(text, ico, color) {
      if (ico === undefined) {
        ico = "mdi-check-circle";
      }
      if (color === undefined) {
        color = "success";
      }
      this.color = color;
      this.text = text;
      this.text_ico = ico;
      this.snackbar = true;
    },
    tabsfunc(response) {
      // 处理响应数据
      const Getresponse = response.data;
      const abc = Getresponse.data;
      var req = "";
      try {
        req = JSON.parse(abc.request);
        req = this.jsonToArray(req);
      } catch {
        req = this.jsonToArray(abc.request);
      }

      const b = this.jsonToArray(abc.response);
      const e = this.jsonToArray(abc.cookie);
      console.log(e);
      const a = this.jsonToArray({
        请求网址: abc.url,
        请求方法: abc.method,
        状态代码: abc.code,
        请求时间: abc.elapsed,
        编码: abc.encoding,
      });
      const d = Getresponse.data.data;
      console.log([d]);
      this.tabs[0].content.a.rows = a;
      this.tabs[0].content.b.rows = b;
      this.tabs[0].content.c.rows = req;
      this.tabs[0].content.d.rows = [[d]];
      this.tabs[1].content = this.sanitizeHTML(Getresponse.data.content);
      var isJson = this.isJSONObject(Getresponse.data.content);
      this.tabs[2].isJson = isJson;
      if (isJson) {
        this.jd = JSON.parse(Getresponse.data.content);
      } else {
        this.tabs[2].content = this.sanitizeHTML(Getresponse.data.content);
      }
      console.log(this.jd);
      this.tabs[3].content.e.rows = e;
      this.sourcetext = Getresponse.data.content;
      //formData
      this.formData.url = abc.url;
      this.formData.data = d;
      this.formData.method = abc.method;
      this.formData.encode = abc.encoding;
      this.formData.header = JSON.stringify(abc.request);
    },
    jsonToArray(obj) {
      const newArray = [];
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          const newItem = [`${key}:`, obj[key]];
          newArray.push(newItem);
        }
      }
      return newArray;
    },
    fetchData() {
      // 发起异步请求获取数据
      axios
        .post("/api/spider/data", { task: this.itemName })
        .then((response) => {
          // this.items = response.data;
          this.items = response.data.sort((a, b) => {
            return new Date(b.time) - new Date(a.time);
          });
        })
        .catch((error) => {
          console.error(error);
        });
    },
    openModal() {
      this.modalOpen = true; // 打开模态框
    },
    openhModal() {
      try {
        const transformedData = Object.entries(
          JSON.parse(this.formData.header)
        ).map(([key, value]) => ({
          key,
          value,
        }));

        this.initData = transformedData;
        this.edithmOpen = true; // 打开模态框
      } catch {
        this.initData = "";
        this.edithmOpen = true; // 打开模态框
      }
    },
    closeModal() {
      this.modalOpen = false; // 关闭模态框
    },
    closehModal() {
      this.edithmOpen = false; // 关闭模态框
    },
    submitForm() {
      var dataValue = "";
      // 在这里可以处理表单提交逻辑
      axios
        .post("/api/spider/curl", { data: this.inputValue })
        .then((response) => {
          const items = response.data;
          try {
            if (typeof items.data === "string") {
              dataValue = items.data;
            }

            if (typeof items.data === "object") {
              dataValue = JSON.stringify(items.data);
            }
          } catch (e) {
            dataValue = items.data;
          }
          if (dataValue === null || dataValue === "null") {
            dataValue = "";
          }
          this.formData.url = items.url;
          this.formData.data = dataValue;
          this.formData.header = JSON.stringify(items.headers);
          this.formData.method = items.method;
          this.textValue = items.text;
          this.alertmsg("curl完成");
        })
        .catch((error) => {
          console.error(error);
        });
      this.closeModal(); // 提交后关闭模态框
    },
    clearForm() {
      // 在这里可以处理表单提交逻辑
      this.inputValue = "";
    },
    clear() {
      // 在这里可以处理表单提交逻辑
      this.tabs = [
        {
          value: "header",
          label: "标头",
          content: {
            aisCollapsed: false,
            bisCollapsed: false,
            cisCollapsed: false,
            a: { name: "常规", rows: [] },
            b: { name: "响应标头", rows: [] },
            c: { name: "请求标头", rows: [] },
            d: { name: "请求参数", rows: [] },
          },
        },
        {
          value: "request",
          label: "预览",
          content: "",
        },
        { value: "response", label: "响应", content: "" },
        {
          value: "cookie",
          label: "cookie",
          content: { eisCollapsed: false, e: { name: "响应cookie", rows: [] } },
        },
      ];
      this.formData = { encode: "utf-8", method: "GET", data: [""] };
      this.alertmsg("表单清空成功");
    },
    copytext() {
      // 在这里可以处理表单提交逻辑
      var text = this.textValue;
      this.$copyText(text)
        .then(() => {
          this.alertmsg("Requests复制成功");
        })
        .catch(() => {
          this.alertmsg("复制失败,需要先进行Crul", "mdi-cancel", "error");
        });
    },
    saveheader() {
      const transformedData = this.initData.reduce((obj, item) => {
        obj[item.key] = item.value;
        return obj;
      }, {});
      this.formData.header = JSON.stringify(transformedData);
      this.closehModal();
    },
    taskdel(_id) {
      axios
        .post("/api/spider/task/del", { task: _id, itemName: this.itemName })
        .then(() => {
          this.alertmsg("删除" + _id);
          this.fetchData();
        })
        .catch((error) => {
          console.error(error);
        });
    },

    datasource() {
      this.tabs[2].content = this.sourcetext;
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  padding-top: 1%;
}

.left-container {
  transition: width 0.3s;
  width: 48%;

  /* 添加过渡效果 */
}

.right-container {
  transition: width 0.3s;
  width: 52%;
  height: 100vh;
  border-left: 3px solid #ccc;
  overflow-y: auto;
}
</style>
